<template>
  <div class="resultPage">
    <div class="resultText" v-if="keywords.trim()!=''">搜索："{{ keywords }}"</div>
    <ul>
      <li v-for="(song, index) in result" :key="index">
        <song-item :item="song" :keywords="keywords"></song-item>
      </li>
    </ul>
    <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore" v-if="hasmore">加载更多...</div>
    <div class="nomore" v-if="!hasmore && result.leng>0">已经到底啦...</div>
  </div>
</template>

<script>
import SongItem from "../components/SongItem.vue";
import Loading from "../components/Loading.vue";
export default {
  name: "SearchResult",
  props: ["keywords"],
  data() {
    return {
      result: [],
      page: 1,
      isLoading: true,
      hasmore: true,
    };
  },
  created() {
    this.result = [];
    this.loadSearch();
  },
  components: {
    SongItem,
    Loading,
  },
  methods: {
    loadSearch() {
      //根据关键字获取搜索结果
      if (this.keywords.trim() == "") {
        this.isLoading = false;
        this.hasmore = false;
        return false;
      } else {
        this.$http
          .get(
            "/search?keywords=" +
              this.keywords.trim() +
              "&type=1&offset=" +
              (this.page - 1) * 30
          )
          .then((data) => {
            console.log(data.data.result);
            if (typeof data.data.result == "undefined") {
              return;
            } else {
              this.result = this.result.concat(data.data.result.songs);
              this.isLoading = false;
            }
          });
      }
    },
    loadMore() {
      this.page++;
      if (this.page >= 6) {
        this.hasmore = false;
        return false;
      }
      this.isLoading = true;
      this.loadSearch();
    },
  },
};
</script>

<style lang="less" scoped>
.resultText {
  color:white;
  padding: 2px 1px;
  text-indent: 2px;
  background-color: rgb(15, 15, 15);
}
.loadingmore {
  background-color: rgb(15, 15, 15);
  text-align: center;
  font-size: 14px;
  color: rgb(255, 208, 0);
}
.nomore {
  padding: 3px;
  text-align: center;
  font-size: 14px;
  color: rgb(255, 208, 0);
}
</style>
